Help Table definition

Description

Define the source for the Help text displayed in the dialog.

images/helptable.png

Help table definitions is also Grid Component. It allows you to define a help dialog that pops up for certain types of controls in the UX component. For example many data controls such as TextBox controls, TextArea controls, and DropdownBox controls all have the ability to add a help table definition; as can an embedded grid component. Help table definitions can be defined in either a DBF or SQL table. If you do not yet have a Help table to store definitions you can easily create a new one by first defining a connection string, then naming the table, and then clicking the 'Create Help Table' hyperlink at the bottom of the 'Define Source For Help Text' dialog. These steps are illustrated in the section below. You can also define a Help Table in Project Properties via the Web Projects Controls panel.

Once a help table has been defined you can add help to individual controls by going to the UX Controls page, highlighting the control you want to add help to in the controls tree, and then checking the 'Has Help' property; in the Field Properties section of the control properties list. If a control has help, you will need to define a 'Help ID' property for the control. This Help ID corresponds to a given row in the Help Table. You can also add icons that users can click on to view the help.

Help Table Definition Properties

Use project help table

Use the help table defined in the Project Properties. If you check this option then you will have to define a Help Table in Project Properties.

Table Type

Specify if the table should be read from a DBF or a SQL table.

Connection string

If using a SQL table specify the connection string to the SQL database.

Table name

Specify the table name. This is the table where the help text is stored. You can define a new name for a table here.

ID field

Specify the name of the field in the Help table that contains the Help ID value. This field must be a character field that is a minimum of 60 characters wide.

Help text field

Specify the name of the field that contains the Help text. This should be a memo or long text field.

images/htdex.png
Some help text that was retrieved from an SQL table.

For more on how to implement help tables read the guide below. You can also watch the following six videos that explain how to implement the same type of table in a grid component: Part 1, Part 2, Part 3, Part 4, Part 5, Part 6.

Use a Help Table Defined in Project Properties

  1. In the 'Web Projects Control Panel' click the 'Project Properties' button in the page's toolbar.

    images/htd.png
  2. Scroll down the project properties list and expand the 'Help Table Settings' section.

    images/htd2.png
  3. Click the [...] button next to the 'Table type' property. The Define Help Table dialog will load.

    images/htd3.png
  4. Set the Table Type dropdown to be SQL.

    images/htd4.png
  5. Click the [...] button next to the 'Connection string' property and create a connection string to the Northwind database.

    images/htd5.png
  6. Next to the 'Table name' property type the name of the table you wish to create.

    images/htd6.png
  7. Click the 'Create Help Table' hyperlink at the bottom of the dialog. Click OK and OK again to close Project Properties.

    images/htd7.png
  8. Create a new UX component. In the UX Builder's UX Properties page scroll down to the 'Other' properties section. Click the [...] button next to the 'Help Table definition' property.

    images/htd8.png
  9. In the 'Define Source for Help Text' dialog check the 'Use project help table' checkbox.

    images/htd9.png

Create Help Data to Add to the Table

  1. On the UX Controls page open the 'Data Controls' menu. Click on [TextBox] to add a textbox control to the component.

    images/htd10.png
  2. Highlight the textbox control. In the properties list on the right, in the 'Field Properties' section, check the 'Has Help' checkbox.

    images/htd11.png
  3. Click the [...] button next to the 'Help ID' property

    images/htd12.png
  4. Create a new 'Help Id' name and click the 'Edit Help Text for this Help Id' button.

    images/htd13.png
  5. A prompt will ask whether to create a new topic for this Id. Check 'Yes'

    images/htd14.png
  6. Define the text that you want to appear in the Help box. You can use the HTML editor and insert various directives into the help text in the 'Edit Help Text' dialog. Click OK and OK again when finished.

    images/htd15.png
  7. Back on the UX Controls page, click the dropdown next to the 'Show help icon' property and select the 'LeftOfControl' option.

    images/htd16.png
    You can define what this icon looks like in the 'Help icon' property directly below the 'Show help icon' property.
  8. Run the component in Live Preview and click the '?' button next to the textbox control.

    images/htd17.png
  9. The help text you defined for that control should load.

    images/htd18.png